<template>
	<div>
		<pop-layout :show.sync="show" :layoutstyle="layoutStyle" :showContent="hasMapItem == true">
			<template #header>
				<image-com :src="baseURL + mapItem.mainImageUrl" :imgStyle="{width: '2.75rem',height: '2.75rem'}"></image-com>
				<!-- <img :src="baseURL + mapItem.mainImageUrl" mode="aspectFill" class="photo" /> -->
			</template>
			<template #title>
				<div class="font28 bold line15">{{mapItem.productName}}({{mapItem.salePrice}})</div>
			</template>
			<template #detail>
				<div class="font24 line15">{{ getPackageDetails(mapItem) }}<!-- <span style="background-color: #ffeca9; color: #feb329; border-radius: 5rpx;padding: 0 0.25rem; margin-right: 0.25rem;">1人份</span>--></div>
			</template>
			<template #content>
				<div class="classifyList padB40">
					<!-- <div class="padT24 font28" style="display: flex; justify-content: space-between; align-items: center;">
						<div class="line2">
							固定搭配菜品(点击可选制作方式)
						</div>
					</div>
					<div>
						<div class="filterList marT24">
							<img src="../../../public/static/img/indexBg.jpg" mode="aspectFill" class="photo"/>
							<div class="filterItem">
								<div class="font28 bold line15" style="display: flex;"><span class="itemText">菜品名称01</span></div>
								<div class="font24 line15" ><span class="marR40">冷盘</span>小份</div>
							</div>
							<div class="font24 arrow">制作方式</div>
						</div>
						<div class="filterList marT24">
							<img src="../../../public/static/img/indexBg.jpg" mode="aspectFill" class="photo"/>
							<div class="filterItem">
								<div class="font28 bold line15" style="display: flex;"><span class="itemText">菜品名称01</span></div>
								<div class="font24 line15" ><span class="marR40">冷盘</span>小份</div>
							</div>
							<div class="font24 arrow">制作方式</div>
						</div>
					</div> -->
					<div v-for="(pitem, pidx) in mapItem.packages" :key="pidx">
						<div class="padT24 font28 ableReplace" style="">
							<div class="line2">
								可替换菜品
							</div>
							<div class="replaceBtn"  @click="openReplaceBox(pitem, pidx)">
								替换菜品
							</div>
						</div>
						<div>
							<div class="filterList marT24 " v-for="(sitem, sidx) in pitem.items" :key="sidx" v-show="sitem.itemCount>0">
								<!-- <img :src="baseURL + sitem.mainImageUrl" mode="aspectFill" class="photo"/> -->
								<image-com :src="baseURL + sitem.mainImageUrl" :imgStyle="{width: '2.75rem',height: '2.75rem'}"></image-com>
								<div class="filterItem">
									<div class="font28 bold line15" style="display: flex;"><span class="itemText">{{ sitem.productName }}</span><span class="colorR marL40">{{ dishTitleAppend(sitem) }}</span></div>
									<div class="font24 line15" >{{ getItemFormat(sitem) }}</div>
								</div>
								<div class="font24 arrow" v-show="sitem.type == 5" @click="openProductMethods(sitem, pitem.items)">制作方式</div>
							</div>
						</div>
					</div>
				</div>
			</template>
			<template #footer>
				<div class="proMethodsBottomBox">
					<div class="btn font30 bold" style="flex: 2;">总合计 <span class="marL40 font46">¥ {{ allPrice }}</span></div>
					<div class="btn font30 surnBtn" @click="finish">加入购物车</div>
					<!-- <div class="btn addSubtWrapper">
						<div class="addSubt">
							<span class="operate">-</span>
							<input type="text" value="1" class="much">
							<span class="operate">+</span>
						</div>
					</div> -->
				</div>
			</template>
		</pop-layout>
		<replaceBox ref="replaceBox"></replaceBox>
		<productMethods ref="productMethods"></productMethods>
	</div>
</template>

<script>
import { singleItemCalculate } from "@/utils/cartFn";
import { baseURL } from "@/api/config";
import { GetProductById } from "@/api/order";
import imageCom from "@/components/common/imageCom.vue";
import replaceBox from "@/components/replaceBox/replaceBox.vue"
import productMethods from "@/components/productMethods/productMethods.vue"
import popLayout from "@/components/common/popLayout.vue"
import cartmixin from "@/components/common/cart-mixin";
import _cloneDeep from "lodash/cloneDeep"
export default {
	components:{
		popLayout,
		imageCom,
		replaceBox,
		productMethods
	},
	data(){
		return{
			layoutStyle: 'packageProductBox',
			baseURL,
			show: false,
			allParams:null,
			mapItem:{},
			singleItemCalculate,
		}
	},
	mixins: [cartmixin],
	computed: {
		hasMapItem() {
			let res = Object.keys(this.mapItem).length > 0 ? true : false;
			return res;
		},
		allPrice() {
			let price = 0;
			if (this.hasMapItem == false) return price;
			price += this.singleItemCalculate(this.mapItem);
			return price;
		},
	},
	methods: {
		close() {
			this.show = false;
		},
		openReplaceBox(item, idx) {
			this.$refs.replaceBox.showPopup({
				item,
				idx,
				cb: this.replaceModalCallBack,
			});
		},
		replaceModalCallBack(params) {
			this.mapItem.packages.splice(params.idx, 1, params.mapItem);
		},
		openProductMethods(item, list) {
			let params = {
				item,
				list,
				cb: this.methodsModalCallback,
				popType: 2,
			};
			this.openPop("productMethods", params);
		},
		methodsModalCallback(params) {
			let { list, item, mapItem } = params;
			let idx = list.findIndex((oitem) => oitem == item);
			list.splice(idx, 1, mapItem);
		},
		/**
		 * @description 套餐内容
		 */
		getPackageDetails(mapItem) {
			let { packages } = mapItem;
			let descArr = [];
			for (let p of packages) {
				if (!p.items.length) continue;
				p.items.forEach((pitem) => {
				if (pitem.itemCount > 0) {
					let unitName = pitem?.unit?.unitName ?? "";
					let desc = `${pitem.productName}x${pitem.itemCount}${unitName}`;
					descArr.push(desc);
				}
				});
			}
			let detail = descArr.join("+");
			return detail;
		},
		/**
		 * @description 规格
		 * 1.skuName 2.model 3.configs.title
		 */
		getItemFormat(item) {
		// 菜品
		let str = "";
		if (item.type == 5) {
			let arr = [];
			item.foodGroups.forEach((f) => {
			f.items.forEach((fitem) => {
				if (fitem.isDefault == true) {
				arr.push(fitem.itemTitle);
				}
			});
			});
			str = arr.join(",");
			return str;
		}
		let unitName = item?.unit?.unitName ?? "";
		return str + `x${item.itemCount}${unitName}`;
		},
		/**
		 * @description 描述菜品，包括加价或需要选择做法
		 */
		dishTitleAppend(sitem) {
		let desc = "";
		let { type } = sitem;
		if (type != 5) return desc;
		if (this.singleMethodCanFinish(sitem) == false) {
			desc = "需要选择做法";
			return desc;
		} else if (sitem.itemCount > 0) {
			let singlePrice = this.singleItemCalculate(sitem, false);
			singlePrice > 0 && (desc = `+${singlePrice}`);
			return desc;
		} else {
			return desc;
		}
		},
		// cloneDeep(obj) {
		// 	let copyObj = JSON.parse(JSON.stringify(obj));
		// 	return copyObj;
		// },
		showPopup(params) {
			this.allParams = params
			this.show = true;
			if (params?.needReq == true) {
				this.reqGetProductById();
			} else {
				this.mapItem = _cloneDeep(params.item);
			}
		},
		// --------------------------验证---------------------------
		canFinish() {
			let res = true;
			let finalMethodValid = true;
			// 菜品验证
			this.mapItem.packages.forEach((p) => {
				p.items.forEach((pitem) => {
				if (pitem.itemCount > 0) {
					res = this.singleMethodCanFinish(pitem);
					res == false && (finalMethodValid = false);
				}
				});
			});
			return finalMethodValid;
		},
		/**
		 * @description 单组菜品验证
		 */
		singleMethodCanFinish(list) {
			let res = true;
			list.foodGroups.forEach((f) => {
				let limit = f.count;
				let selected = 0;
				f.items.forEach((fitem) => {
				fitem.isDefault == true && selected++;
				});
				selected != limit && (res = false);
			});
			return res;
		},
		finish() {
			let canFinish = this.canFinish();
			if (canFinish == false) {
				// uni.showToast({
				// title: "请补充菜品做法",
				// icon: "none",
				// duration: 1000,
				// });
			} else {
				let params = { ...this.allParams, mapItem: this.mapItem };
				this.allParams.cb(params);
				this.close();
			}
		},
		// --------------------------请求---------------------------
		async reqGetProductById() {
			let { productId } = this.allParams.item;
			let { returnData = false } = await GetProductById({ productId });
			if (returnData == false) return;
			// 1.onOpen，每个分组isDefault==true设置为itemCount=1，大于1显示
			for (let p of returnData.packages) {
				if (p.items.length <= 0) continue;
				p.items.forEach((pitem) => {
				if (pitem.isDefault == true) {
					pitem.itemCount = 1;
				} else {
					pitem.itemCount = 0;
				}
				});
			}
			this.mapItem = returnData;
		},
	},
}
</script>

<style lang="scss">
	// 套餐
	.packageProductBox{ z-index: 24; top: 20%; left:0; width: 100%; bottom: 0; border-radius: 0.5rem 0.5rem 0 0; text-align: left; padding: 0.75rem; transform: translate(0,0);box-sizing: border-box;
		.classifyList{ height: calc(100% - 5.25rem); overflow-y: scroll; flex: 1; -webkit-flex: 1; box-sizing: border-box; 
			.ableReplace{ display: flex; justify-content: space-between; align-items: center;
				.replaceBtn{ background-color: #ffae44; color: #fff; border-radius: 0.25rem; padding: 0.25rem 0.5rem;}
			}
		}
		.entryBox { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start;
			.entryItem { display: flex; flex-direction: column; justify-content: center; width: 5.25rem; height: 11.25rem; text-align: center; margin: 0 0.75rem 0.75rem 0; border-radius: 0.25rem; background-color: #f0f0f0; box-sizing: border-box; 
				&:nth-of-type(3n) {
					margin-right: 0;
				}
				&.on{ position: relative; border: 0.1rem solid #ff0000; background-color: #ffeded; color: #333;
					//&::after { content: ''; position: absolute; right: 0; top: 0.5rem; display: block; transform: translateY(-50%); width: 40rpx; height: 40rpx; background: url(../../static/images/check_circle.png) no-repeat; background-size: cover; }
				}
				&.disable{ border: 0.1rem dashed #ccc;}
			}
			.entryText{ padding: 0.5rem; border-radius: 0.25rem; width: 100%; height: 11.25rem; background-color: #f0f0f0;}
		}
		.filterList{ position: relative; display: flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap;  align-content: flex-start; -webkit-align-content: flex-start; background-color: #f0f0f0; padding: 3%; border-radius: 0.5rem;
			.photo{ display: block; text-align: center; overflow: hidden; width: 2.75rem;  height: 2.75rem;}
			.filterItem{ margin: 0 3%; flex: 1; display: flex; flex-direction: column; justify-content: space-between;
			.itemText{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1;-webkit-box-orient: vertical;
				.price{ width: 5rem;}
			}
			}
			.arrow{ align-self: center; margin-right: 4%;
				&:before{ content: ''; position: absolute; top: 48%; right: 2.4%; width: 0.5rem; height: 0.5rem; border-top: 1px solid #929292; border-right: 1px solid #929292; transform: rotate(45deg) translateX(-50%); -webkit-transform: rotate(45deg) translateX(-50%);}
			}
			&+.filterList:after{content: " "; position: absolute; left: 0.4rem; top: 0; right: 0.4rem; height: 1px; border-top: 1px solid #E5E5E5; color: #E5E5E5; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5);}
		}
		.addSubtWrapper{ display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: space-between; -webkit-justify-content: space-between;
			.addSubt{ width: 4rem; height: calc(1.25rem + 2px); display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; font-size: 1.25rem; overflow: hidden; white-space: nowrap;}
			.operate{ width: 1.35rem; height: 1.25rem; line-height: 1.2rem; text-align: center; cursor: pointer; color: #feb229; border: 1px solid #feb229; border-radius: 4px;
				&:last-child{ border: 1px solid #feb229; background-image: linear-gradient(to right,#ffae44,#ff6e40); color: #fff;}
			}
			.much{ width: calc(100% - 2.5rem - 2px);  height: 1.25rem; line-height: 1.2rem;  text-align: center; outline: none; border: none; border-radius: 0;}
		}
		.proMethodsBottomBox{ position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; height: 2.75rem; line-height: 2.75rem; overflow: hidden; box-shadow: 0 0 0.25rem rgba(0,0,0,0.2);
			.btn{ height: 2rem; line-height: 2rem; border-radius: 0.5rem; margin: 0 0.75rem;}
			.cancelBtn{ flex: 1; text-align: center; color: #333; margin-right: 0.375rem; border: 1px solid #333;}
			.surnBtn{ flex: 1; text-align: center; /*color: #fff;*/ margin-left: 0.375rem; background-image: linear-gradient(to right,$mainColor,#ffae44);}
		}
	}
</style>
